<!DOCTYPE HTML>
<html>
<head>
    <title>nativeDroid II - jQueryMobile Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
    <link rel="stylesheet" href="../../vendor/waves/waves.min.css"/>
    <link rel="stylesheet" href="../../vendor/wow/animate.css"/>
    <link rel="stylesheet" href="../../css/nativedroid2.css"/>

    <style>
        /* Prevent FOUC */
        body {
            opacity: 0;
        }
    </style>

</head>
<body>

<div data-role="page">

    <nd2-include data-src="examples/fragments/panel.left.html"></nd2-include>


    <div data-role="header" data-position="fixed" class="wow fadeIn">
        <a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
        <h1 class="wow fadeIn" data-wow-delay='0.4s'>Text / Typography</h1>
    </div>

    <div role="main" class="ui-content wow fadeIn" data-wow-delay="0.2s" data-inset="false">

        <h4>General Header (H1 - H6)</h4>

        <h1>Regular 56px / 400 / &lt;h1&gt;</h1>
        <h2>Regular 34px / 400 / &lt;h2&gt;</h2>
        <h3>Regular 24px / 400 / &lt;h3&gt;</h3>
        <h4>Medium 2sp / 500 / &lt;h4&gt;</h4>
        <h5>Regular 16px / 400 / &lt;h5&gt;</h5>
        <h6>Regular 14px / 400 / &lt;h6&gt;</h6>

        <hr/>

        <h4>Display / Header / Title Sizes</h4>

        <h1 class="nd2-display-4">
            Light 112px
            <span class="nd2-subhead">.nd2-display-4</span>
        </h1>

        <h2 class="nd2-display-3">
            Regular 56px
            <span class="nd2-subhead">.nd2-display-3</span>
        </h2>

        <h3 class="nd2-display-2">
            Regular 45px
            <span class="nd2-subhead">.nd2-display-2</span>
        </h3>

        <h4 class="nd2-display-1">
            Regular 34px
            <span class="nd2-subhead">.nd2-display-1</span>
        </h4>

        <h5 class="nd2-headline">
            Regular 24px
            <span class="nd2-subhead">.nd2-headline</span>
        </h5>

        <h6 class="nd2-title">
            Medium 2p
            <span class="nd2-subhead">.nd2-title</span>
        </h6>

        <h6 class="nd2-subhead">
            Regular 16px
            <span class="nd2-subhead">.nd2-subhead</span>
        </h6>

        <hr/>

        <h4>Text Paragraph / Regular 400 / 16px</h4>

        <div class='row'>

            <div class='col-xs-12 col-md-6'>
                <div class='box'>
                    <p>
                        Typography is the art and technique of arranging type to make written language readable and
                        appealing. The arrangement of type involves selecting typefaces, point size, line length,
                        line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs
                        (kerning). Type design is a closely related craft, sometimes considered part of typography; most
                        typographers do not design typefaces, and some type designers do not consider themselves
                        typographers. In modern times, typography has been put in film, television and online broadcasts
                        to add emotion to communication.
                        <br/>(Source: <a href="http://www.wikipedia.org">Wikipedia</a>)
                    </p>
                </div>
            </div>

            <div class='col-xs-12 col-md-6'>
                <div class='box'>
                    <blockquote>
                        <p>You know the golden rule, don't you boy? Those who have the gold make the rules.</p>
                        <footer>Crazy hunch-backed old guy from the movie Aladdin</footer>
                    </blockquote>
                </div>
            </div>

        </div>


    </div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="../../vendor/waves/waves.min.js"></script>
<script src="../../vendor/wow/wow.min.js"></script>
<script src="../../js/nativedroid2.js"></script>
<script src="../../nd2settings.js"></script>

</body>
</html>
